<template>
  <div id="video-container">
    <hls-video
      id="livePlayer"
      ref="livePlayer"
      :url="url"
      :muted="muted"
      @updateCurrentTime="onUpdateTime"
      @loadedmetadata="onloadedmetadata"
      @playstate="playstate"
      @changeState="onchangeState"
      @event="onVuePlayerStateChange"/>
      <!--    <video-->
      <!--      id="livePlayer"-->
      <!--      ref="livePlayer"-->
      <!--      :style="{'width': '100%', 'height': '100%'}"-->
      <!--      controls="false"-->
      <!--      preload="auto"-->
      <!--      playsInline-->
      <!--      autoplay-->
      <!--      webkit-playsinline-->
      <!--      x-webkit-airplay="true"-->
      <!--      x5-playsinline="true"-->
      <!--      @canplay="onVuePlayerStateChange(false, 'canplay')"-->
      <!--      @play="onVuePlayerStateChange(true, 'play')"-->
      <!--      @pause="onVuePlayerStateChange(false, 'pause')"-->
      <!--      @ended="onVuePlayerStateChange(false, 'ended')"-->
      <!--      @abort="onVuePlayerStateChange(false, 'abort')"-->
      <!--      @error="onVuePlayerStateChange(false, 'error')"-->
      <!--    />-->
      <!--    <videoPlayer-->
      <!--      ref="livePlayer"-->
      <!--      :playsinline="true"-->
      <!--      :options="playerOptions"-->
      <!--      class="video-player vjs-custom-skin"-->
      <!--    />-->
  </div>
</template>

<script>
// import RtmpStreamer from 'rtmp-streamer'

// import videojs from 'task.js'
// import 'task.js/dist/video-js.css'
// import videoPlayer from 'vue-video-player'
// import 'videojs-flash'
// import 'videojs-contrib-hls'

import ObjectUtil from '../../../../utils/object-util'
import HlsVideo from '../../../../components/common/HlsVideo'

export default {
  name: 'LiveVideoAreaView',
  components: {
    HlsVideo
    // videoPlayer
  },
  props: {
    url: {
      type: [String],
      default: undefined
    },
    muted: {
      type: [Boolean],
      default: false
    }
  },
  data() {
    return {
      cameraAreaWidth: 0,
      cameraAreaHeight: 0,
      loading: true
    }
  },
  mounted() {
    const that = this
    const container = document.getElementById('video-container')
    if (ObjectUtil.notNull(container)) {
      that.cameraAreaWidth = container.clientWidth
      that.cameraAreaHeight = container.clientHeight
    }
    setTimeout(() => {
      that.play()
    }, 3000)
  },
  methods: {
    onchangeState(val) {
      this.$emit('changeState', val)
    },
    playstate(val) {
      this.$emit('playstate', val)
    },
    onloadedmetadata(length) {
      console.log(length)
      this.$emit('loadedmetadata', length)
    },
    onUpdateTime(time) {
      // console.log(val,'val')
      this.$emit('onUpdateTime', time)
    },
    onVuePlayerStateChange(playing, name) {
      // console.log(playing, name)
      this.$emit('watchState', playing)
      if (name === 'error') {
        this.showErrorToast('播放失败，请重试')
      }
    },
    stop() {
      this.$refs.livePlayer.stop()
    },
    play() {
      this.$refs.livePlayer.play()
    },
    currentTime(time) {
      return this.$refs.livePlayer.currentTime(time)
    },
    clipImage() {
      return this.$refs.livePlayer.clipImage()
    }
  }
}
</script>

<style scoped>

</style>
